<template>
  <div class="news_list">
    <ul class="news_info_list" v-if="currentNav == 1">
      <li
        class="news_info_item"
        @click="$router.push({path:'/newsDetrails',query:{id: item.id}})"
        v-for="item in mountainList"
        :key="item.id"
      >
        <div class="info_fr">
          <img class="info_fr_img" :src="item.image" alt />
        </div>
        <div class="info_fl">
          <h2>{{item.title}}</h2>
          <!-- <p v-html="item.content"></p> -->
          <div>
            <span>平台发布</span>
            <span>{{item.create_at}}</span>
          </div>
        </div>
      </li>
      <li v-show="noMoreData" class="noMoreData">没有更多数据了</li>
    </ul>

    <ul class="news_info_list" v-else>
      <li
        class="news_info_item"
        v-for="item in mountainList"
        @click="gotuBaidu(item)"
        :key="item.id"
      >
        <div class="info_fr">
          <img class="info_fr_img" src="~assets/img/tutu@2x.png" alt />
        </div>
        <div class="info_fl">
          <h2>
            {{item.mountain_name}}
            <span>{{item.distance | distance}} km</span>
          </h2>
          <p>{{item.location}}</p>
          <div>
            <span>平台发布</span>
            <span>{{item.create_at}}</span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { getSignPackage} from 'api/home.js'
export default {
  name: "NewsList",
  props: {
    mountainList: {
      type: Array,
      default: [],
    },
    currentNav: {
      type: String,
      default: "1",
    },
    noMoreData: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      longitude: null,
      latitude: null,
      NearKey: false,
    };
  },
  filters: {
    distance(num) {
      if (num) {
        return num.toFixed(2);
      }
    },
  },
  watch: {
    currentNav: function (newNav, oldNav) {
      this.queryData(newNav);
    },
    // mountainList: function(data){
    //   if(this.mountainList.length !== 0){
    //     this.gotoMap();
    //   }
    // },
    mountainList: {
　　　　handler(newValue, oldValue) {
　　　　　　this.queryData2(newValue);
　　　　}
　　}
  },
  
  methods: {
    queryData(newNav) {
      this.currentNav = newNav;
    },
    queryData2(newNav){
      this.mountainList = newNav;
      if(this.mountainList.length !==0){
        this.gotoMap();
      }
    },
    gotoMap() {
      this.winUrl = location.href;
      getSignPackage(this.winUrl).then((res) => {
        let that = this;
        if (res.code == 200) {
          // 配置 JS-SDK
          that.wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: res.data.signPackage.appId, // 必填，公众号的唯一标识
            timestamp: res.data.signPackage.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.signPackage.nonceStr, // 必填，生成签名的随机串
            signature: res.data.signPackage.signature, // 必填，签名
            jsApiList: ["scanQRCode", "getLocation"], // 必填，需要使用的JS接口列表
          });
          that.wx.ready(() => {
            that.wx.getLocation({
              type: "gcj02",
              success: function (res) {
                // latitude;  纬度，浮点数，范围为90 ~ -90
                // longitude;  经度，浮点数，范围为180 ~ -180。
                let lat = res.latitude;
                let lng = res.longitude;
                let x_PI = (3.14159265358979324 * 3000.0) / 180.0;
                let z =
                  Math.sqrt(lng * lng + lat * lat) +
                  0.00002 * Math.sin(lat * x_PI);
                let theta =
                  Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * x_PI);
                that.longitude = z * Math.cos(theta) + 0.0065;
                that.latitude = z * Math.sin(theta) + 0.006;
              },
            });
          });
        }
      });
    },

    // 前往百度地图
    gotuBaidu(item) {
      alert(this.latitude, this.longitude)
      window.location.href = `http://api.map.baidu.com/direction?origin=latlng:${this.latitude},${this.longitude}|name:我的位置&destination=${item.mountain_name}&mode=driving&region=济南&output=html&src=webapp.baidu.openAPIdemo`;
    },
  },
  beforeRouteEnter(to, from, next) {
    let u = navigator.userAgent;
    let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    // XXX: 修复iOS版微信HTML5 History兼容性问题
    if (isiOS && to.path !== location.pathname) {
      // 此处不可使用location.replace
      location.replace(to.fullPath);
    } else {
      next();
    }
  },
  //离开删除绑定事件
  beforeDestroy() {
    this.page = 1;
    window.removeEventListener("scroll", this.menu);
  },
};
</script>

<style lang="less" scoped>
.news_list {
  padding: 0 10px;
  .news_info_list {
    .news_info_item {
      display: flex;
      padding: 18px 0;
      height: 103px;
      border-bottom: 1px solid #eeeeee;
      .info_fr {
        width: 110px;
        .info_fr_img {
          width: 100%;
          height: 100%;
          border-radius: 8px;
        }
      }
      .info_fl {
        padding: 10px;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        h2 {
          color: #333;
          line-height: 24px;
          font-weight: 700;
          font-size: 16px;
          span {
            color: #28c08d;
            float: right;
          }
        }
        p {
          height: 38px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          color: #999;
        }
        div {
          display: flex;
          justify-content: space-between;
          color: #666;
        }
      }
    }
    .noMoreData {
      text-align: center;
      height: 36px;
      line-height: 36px;
      font-size: 16px;
    }
  }
}
</style>